<template>
  <div class="content">
    <div ref="charts" style="width:100%;height:65%;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import china from '@/assets/china.json'
export default {
  data() {
    return {
      allData:{
        citys:[    { "name": "威海", "value": [122.12042, 37.513068, 32], "symbolSize": 3, "itemStyle": { "normal": { "color": "#F58158" } } }, { "name": "杭州", "value": [120.15507, 30.274085, 10], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } }, { "name": "贵阳", "value": [106.630154, 26.647661, 2], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } },  { "name": "海门", "value": [121.181615, 31.871173, 2], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } }, { "name": "河北", "value": [114.475704, 38.584854, -19], "symbolSize": 9, "itemStyle": { "normal": { "color": "#58B3CC" } } }, { "name": "深圳", "value": [114.057868, 22.543099, 14], "symbolSize": 10, "itemStyle": { "normal": { "color": "#F58158" } } }, { "name": "吉林", "value": [126.549572, 43.837883, -364], "symbolSize": 14, "itemStyle": { "normal": { "color": "#58B3CC" } } }, { "name": "甘肃", "value": [103.826308, 36.059421, -2], "symbolSize": 2, "itemStyle": { "normal": { "color": "#58B3CC" } } }, { "name": "浙江", "value": [120.152792, 30.267447, -2], "symbolSize": 2, "itemStyle": { "normal": { "color": "#58B3CC" } } },  { "name": "北京", "value": [116.407526, 39.90403, -14], "symbolSize": 2, "itemStyle": { "normal": { "color": "#58B3CC" } } },  { "name": "大同", "value": [113.61244, 40.040295, 1], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } },  { "name": "咸阳", "value": [108.708991, 34.329605, 1], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } }, { "name": "四川", "value": [104.075931, 30.651652, -5], "symbolSize": 10, "itemStyle": { "normal": { "color": "#58B3CC" } } }, { "name": "福建", "value": [119.295144, 26.10078, -1], "symbolSize": 10, "itemStyle": { "normal": { "color": "#58B3CC" } } },  { "name": "青岛", "value": [120.38264, 36.067082, 52], "symbolSize": 3, "itemStyle": { "normal": { "color": "#F58158" } } },  { "name": "沈阳", "value": [123.431475, 41.805698, 41], "symbolSize": 3, "itemStyle": { "normal": { "color": "#F58158" } } }, { "name": "菏泽", "value": [115.480656, 35.23375, 1], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } },   { "name": "南京", "value": [118.796877, 32.060255, 17], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } }, { "name": "成都", "value": [104.066541, 30.572269, 1], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } }, { "name": "陕西", "value": [108.954239, 34.265472, -2], "symbolSize": 9, "itemStyle": { "normal": { "color": "#58B3CC" } } },   { "name": "石家庄", "value": [114.51486, 38.042307, 4], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } },   { "name": "南昌", "value": [115.858198, 28.682892, 2], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } },  { "name": "广州", "value": [113.264435, 23.129163, 13], "symbolSize": 10, "itemStyle": { "normal": { "color": "#F58158" } } }, { "name": "上海", "value": [121.473701, 31.230416, 44], "symbolSize": 3, "itemStyle": { "normal": { "color": "#F58158" } } }, { "name": "内蒙古", "value": [111.765618, 40.817498, -23], "symbolSize": 2, "itemStyle": { "normal": { "color": "#58B3CC" } } },  { "name": "台州", "value": [121.420757, 28.656386, 1], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } }, { "name": "潍坊", "value": [119.161756, 36.706774, 1], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } }, { "name": "苏州", "value": [120.585316, 31.298886, 14], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } },  { "name": "大连", "value": [121.614682, 38.914003, 40], "symbolSize": 8, "itemStyle": { "normal": { "color": "#F58158" } } },  { "name": "无锡", "value": [120.31191, 31.49117, 14], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } }, { "name": "广西", "value": [108.327546, 22.815478, -1], "symbolSize": 7, "itemStyle": { "normal": { "color": "#58B3CC" } } },  { "name": "郑州", "value": [113.625368, 34.7466, 1], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } },  { "name": "湖北", "value": [114.341862, 30.546498, -4], "symbolSize": 2, "itemStyle": { "normal": { "color": "#58B3CC" } } }, { "name": "厦门", "value": [118.089425, 24.479834, 3], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } }, { "name": "哈尔滨", "value": [126.534967, 45.803775, 8], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } }, { "name": "江苏", "value": [118.763232, 32.061707, -1], "symbolSize": 2, "itemStyle": { "normal": { "color": "#58B3CC" } } }, { "name": "烟台", "value": [121.447935, 37.463822, 24], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } }, { "name": "延安", "value": [109.489727, 36.585455, 1], "symbolSize": 10  , "itemStyle": { "normal": { "color": "#F58158" } } }, { "name": "天津", "value": [117.200983, 39.084158, 28], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } }, { "name": "长沙", "value": [112.938814, 28.228209, 5], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } }, { "name": "安徽", "value": [117.284923, 31.861184, -1], "symbolSize": 8, "itemStyle": { "normal": { "color": "#58B3CC" } } }, { "name": "廊坊", "value": [116.683752, 39.538047, 4], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } }, { "name": "黑龙江", "value": [126.661669, 45.742347, -198], "symbolSize": 8, "itemStyle": { "normal": { "color": "#58B3CC" } } }, { "name": "河南", "value": [113.274379, 34.445122, 0], "symbolSize": 8, "itemStyle": { "normal": { "color": "#58B3CC" } } }, { "name": "湖南", "value": [112.98381, 28.112444, -1], "symbolSize": 8, "itemStyle": { "normal": { "color": "#58B3CC" } } },  { "name": "扬州", "value": [119.412966, 32.39421, 5], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } },  { "name": "唐山", "value": [118.180194, 39.630867, 1], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } }, { "name": "武汉", "value": [114.305393, 30.593099, 2], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } }, { "name": "合肥", "value": [117.227239, 31.820587, 1], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } },  { "name": "山东", "value": [117.020359, 36.66853, -6], "symbolSize": 2, "itemStyle": { "normal": { "color": "#58B3CC" } } }, { "name": "舟山", "value": [122.207216, 29.985295, 1], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } }, { "name": "连云港", "value": [119.221611, 34.596653, 1], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } }, { "name": "西安", "value": [108.940175, 34.341568, 3], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } }, { "name": "济南", "value": [117.12, 36.651216, 4], "symbolSize": 14, "itemStyle": { "normal": { "color": "#F58158" } } }, { "name": "绵阳", "value": [104.679114, 31.46745, 1], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } }, { "name": "辽宁", "value": [123.42944, 41.835441, -58], "symbolSize": 9, "itemStyle": { "normal": { "color": "#58B3CC" } } }, { "name": "山西", "value": [112.562398, 37.873532, -3], "symbolSize": 10, "itemStyle": { "normal": { "color": "#58B3CC" } } }, { "name": "呼和浩特", "value": [111.749181, 40.842585, 2], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } }, { "name": "河西", "value": [117.223372, 39.109563, 1], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } },  { "name": "重庆", "value": [106.551557, 29.56301, 2], "symbolSize": 10, "itemStyle": { "normal": { "color": "#F58158" } } }, { "name": "宁波", "value": [121.550357, 29.874557, 10], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } }, { "name": "太原", "value": [112.548879, 37.87059, 2], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } }, { "name": "阳泉", "value": [113.580519, 37.856972, 1], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } },{ "name": "贵州", "value": [106.713478, 26.578343], "symbolSize": 11, "itemStyle": { "normal": { "color": "#58B3CC" } } }, { "name": "东营", "value": [118.58218399999998, 37.448964], "symbolSize": 11, "itemStyle": { "normal": { "color": "#58B3CC" } } }, { "name": "长春", "value": [125.323544, 43.817072, 8], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } }],
        // citys: [{ "name": "济南", "value": [117.12, 36.651216, 4], "symbolSize": 14, "itemStyle": { "normal": { "color": "#F58158" } } },
        // { "name": "长沙", "value": [112.938814, 28.228209, 5], "symbolSize": 13, "itemStyle": { "normal": { "color": "#58B3CC" } } },
        // { "name": "长春", "value": [125.323544, 43.817072, 8], "symbolSize": 11, "itemStyle": { "normal": { "color": "#58B3CC" } } },
        // { "name": "深圳", "value": [114.057868, 22.543099, 14], "symbolSize": 11, "itemStyle": { "normal": { "color": "#58B3CC" } } },
        // { "name": "潍坊", "value": [119.161756, 36.706774, 1], "symbolSize": 11, "itemStyle": { "normal": { "color": "#58B3CC" } } },
        // { "name": "广州", "value": [113.264435, 23.129163, 13], "symbolSize": 11, "itemStyle": { "normal": { "color": "#58B3CC" } } },
        // { "name": "贵州", "value": [106.713478, 26.578343], "symbolSize": 11, "itemStyle": { "normal": { "color": "#58B3CC" } } },
        // { "name": "东营", "value": [118.58218399999998, 37.448964], "symbolSize": 11, "itemStyle": { "normal": { "color": "#58B3CC" } } },
        // { "name": "浙江", "value": [120.152792, 30.267447, -2], "symbolSize": 10, "itemStyle": { "normal": { "color": "#58B3CC" } } },
        // { "name": "江苏", "value": [118.763232, 32.061707, -1], "symbolSize": 2, "itemStyle": { "normal": { "color": "#58B3CC" } } }, 
        // { "name": "咸阳", "value": [108.708991, 34.329605, 1], "symbolSize": 9, "itemStyle": { "normal": { "color": "#F58158" } } }, 
        // { "name": "四川", "value": [104.075931, 30.651652, -5], "symbolSize": 12, "itemStyle": { "normal": { "color": "#58B3CC" } } },
        // { "name": "福田", "value": [114.055036, 22.52153, 2], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } },
        // { "name": "盘锦", "value": [122.070714, 41.119997, 3], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } },
        // { "name": "中山", "value": [113.392782, 22.517646, 4], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } }, 
        // { "name": "福建", "value": [119.295144, 26.10078, -1], "symbolSize": 2, "itemStyle": { "normal": { "color": "#58B3CC" } } }, 
        // { "name": "泰顺", "value": [119.717649, 27.556884, 1], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } },
        // { "name": "昆山", "value": [120.980737, 31.385598, 4], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } },
        // { "name": "徐汇", "value": [121.436525, 31.188523, 2], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } }, 
        // { "name": "东港", "value": [124.152705, 39.863008, 1], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } }, 
        // { "name": "廊坊", "value": [116.683752, 39.538047, 4], "symbolSize": 10, "itemStyle": { "normal": { "color": "#F58158" } } },
        // { "name": "鞍山", "value": [122.994329, 41.108647, 1], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } },
        // { "name": "海陵", "value": [119.919425, 32.491016, 1], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } }, 
        // { "name": "黑龙江", "value": [126.661669, 45.742347, -198], "symbolSize": 8, "itemStyle": { "normal": { "color": "#58B3CC" } } }, 
        // { "name": "西藏", "value": [91.117212, 29.646923, -1], "symbolSize": 8, "itemStyle": { "normal": { "color": "#58B3CC" } } }, 
        // { "name": "河南", "value": [113.274379, 34.445122, 0], "symbolSize": 8, "itemStyle": { "normal": { "color": "#58B3CC" } } },
        // { "name": "湖南", "value": [112.98381, 28.112444, -1], "symbolSize": 2, "itemStyle": { "normal": { "color": "#58B3CC" } } },
        // { "name": "佛山", "value": [113.121416, 23.021548, 2], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } }, 
        // { "name": "珲春", "value": [130.366036, 42.862821, 1], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } }, 
        // { "name": "扬州", "value": [119.412966, 32.39421, 5], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } },
        // { "name": "日照", "value": [119.526888, 35.416377, 2], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } },
        // { "name": "唐山", "value": [118.180194, 39.630867, 1], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } }, 
        // { "name": "同江", "value": [132.510919, 47.642707, 1], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } }, 
        // { "name": "荣成", "value": [122.486658, 37.16516, 4], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } }, 
        // { "name": "虎林", "value": [132.93721, 45.762686, 1], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } },
        // { "name": "武汉", "value": [114.305393, 30.593099, 2], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } }, 
        // { "name": "合肥", "value": [117.227239, 31.820587, 1], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } },
        // { "name": "荆州", "value": [112.239741, 30.335165, 1], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } },
        // { "name": "丰台", "value": [116.287149, 39.858427, 3], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } },
        // { "name": "山西", "value": [112.562398, 37.873532, -3], "symbolSize": 10, "itemStyle": { "normal": { "color": "#58B3CC" } } },
      // ],
        moveLines: [
        { "fromName": "济南", "toName": "长沙", "coords": [[117.020359, 36.66853], [112.938814, 28.228209, 5]] },
        { "fromName": "济南", "toName": "长春", "coords": [[117.12, 36.651216, 4], [125.323544, 43.817072, 8]] },
        { "fromName": "济南", "toName": "深圳", "coords": [[117.12, 36.651216, 4], [114.057868, 22.543099, 14]] },
        { "fromName": "济南", "toName": "潍坊", "coords": [[117.12, 36.651216, 4], [119.161756, 36.706774, 1]] },
        { "fromName": "济南", "toName": "广州", "coords": [[117.12, 36.651216, 4], [113.264435, 23.129163, 13]] },
        { "fromName": "济南", "toName": "贵州", "coords": [[117.12, 36.651216, 4], [106.713478, 26.578343]] },
        { "fromName": "济南", "toName": "东营", "coords": [[117.12, 36.651216, 4], [118.58218399999998, 37.448964]] },
        { "fromName": "济南", "toName": "浙江", "coords": [[117.12, 36.651216, 4], [120.152792, 30.267447, -2]] },
        { "fromName": "济南", "toName": "江苏", "coords": [[117.12, 36.651216, 4], [118.763232, 32.061707, -1]] },
        { "fromName": "济南", "toName": "黑龙江", "coords": [[117.12, 36.651216, 4], [126.661669, 45.742347, -198]] },
        { "fromName": "济南", "toName": "河南", "coords": [[117.12, 36.651216, 4], [113.274379, 34.445122, 0]] },
        { "fromName": "济南", "toName": "廊坊", "coords": [[117.12, 36.651216, 4], [116.683752, 39.538047, 4]] },
        { "fromName": "济南", "toName": "沈阳", "coords": [[117.12, 36.651216, 4], [108.708991, 34.329605, 1]] },
        // { "fromName": "济南", "toName": "西藏", "coords": [[117.12, 36.651216, 4], [91.117212, 29.646923, -1]] },
        { "fromName": "济南", "toName": "大连", "coords": [[117.12, 36.651216, 4], [121.614682, 38.914003]] },
        { "fromName": "济南", "toName": "四川", "coords": [[117.12, 36.651216, 4], [104.075931, 30.651652, -5]] },
        { "fromName": "济南", "toName": "山西", "coords": [[117.12, 36.651216, 4], [112.562398, 37.873532, -3]] },
        { "fromName": "济南", "toName": "安徽", "coords": [[117.12, 36.651216, 4], [117.284923, 31.861184, -1]] },
        { "fromName": "济南", "toName": "荆州", "coords": [[117.12, 36.651216, 4], [112.239741, 30.335165, 1]] },
        { "fromName": "济南", "toName": "重庆", "coords": [[117.12, 36.651216, 4], [106.551557, 29.56301, 2]] },
        { "fromName": "济南", "toName": "广西", "coords": [[117.12, 36.651216, 4], [108.327546, 22.815478, -1]] },
        { "fromName": "济南", "toName": "福建", "coords": [[117.12, 36.651216, 4], [119.295144, 26.10078, -1]] },
        { "fromName": "济南", "toName": "辽宁", "coords": [[117.12, 36.651216, 4], [123.42944, 41.835441, -58]] },
        { "fromName": "济南", "toName": "延安", "coords": [[117.12, 36.651216, 4], [109.489727, 36.585455, 1]] },
        { "fromName": "济南", "toName": "河北", "coords": [[117.12, 36.651216, 4], [114.475704, 38.584854, -19]] },
        // { "fromName": "吉林", "toName": "黄岛", "coords": [[117.12, 36.651216, 4], [120.04619, 35.872664]] },
        // { "fromName": "吉林", "toName": "黄岛", "coords": [[117.12, 36.651216, 4], [120.04619, 35.872664]] },
        // { "fromName": "吉林", "toName": "黄岛", "coords": [[117.12, 36.651216, 4], [120.04619, 35.872664]] },
        // { "fromName": "吉林", "toName": "黄岛", "coords": [[117.12, 36.651216, 4], [120.04619, 35.872664]] },
        // { "fromName": "吉林", "toName": "黄岛", "coords": [[117.12, 36.651216, 4], [120.04619, 35.872664]] },
        // { "fromName": "吉林", "toName": "黄岛", "coords": [[117.12, 36.651216, 4], [120.04619, 35.872664]] },
        // { "fromName": "吉林", "toName": "黄岛", "coords": [[117.12, 36.651216, 4], [120.04619, 35.872664]] },
        // { "fromName": "吉林", "toName": "黄岛", "coords": [[117.12, 36.651216, 4], [120.04619, 35.872664]] },
        // { "fromName": "吉林", "toName": "黄岛", "coords": [[117.12, 36.651216, 4], [120.04619, 35.872664]] },
        
    ]
      }
    };
  },
  mounted() {
    this.initCharts()
  },
  methods: {

    initCharts() {
      const charts = echarts.init(this.$refs.charts);
      const option = {

        title: {
            text: '',
            left: 'center',
            textStyle: {
                color: '#fff'
            }
        },
        legend: {
            show: false,
            orient: 'vertical',
            top: 'bottom',
            left: 'right',
            data: ['地点', '线路'],
            textStyle: {
                color: '#fff'
            }
        },
        geo: {
            map: 'china',
            label: {
              normal: {
                  show: false,
                  textStyle: {
                      color: '#fff'
                  }
              },
                emphasis: {
                    show: true
                }
            },
            roam: true,
            itemStyle: {
                normal: {
                    areaColor: 'rgba(7,21,57,0.5)',
                    borderColor: '#0177ff'
                },
                emphasis: {
                    areaColor: '#071537'//鼠标指上市时的颜色
                }
            }
        },
        series: [{
            name: '地点',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: {
                brushType: 'stroke'
            },
            label: {
              show: true,
              formatter: '{b}',
                emphasis: {
                    show: true,
                    position: 'right',
                    formatter: '{b}'
                }
            },
            symbolSize: 3,
            showEffectOn: 'render',
            itemStyle: {
                normal: {
                    color: '#46bee9'
                }
            },
            data: this.allData.citys
        }, {
            name: '线路',
            type: 'lines',
            coordinateSystem: 'geo',
            zlevel: 2,
            large: true,
            effect: {
                show: true,
                constantSpeed: 30,
                symbol: 'pin',
                symbolSize: 5,
                trailLength: 0,
            },
            lineStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0, color: '#58B3CC'
                    }, {
                        offset: 1, color: '#F58158'
                    }], false),
                    width: 1,
                    opacity: 0.9,
                    curveness: 0.1
                }
            },
            data: this.allData.moveLines
        }]
        }
      echarts.registerMap('china', china);
      
      charts.setOption(option);

    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100vh;
}
</style>